<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title th:text="'你好'">Insert title here</title>

<link th:href="@{/css/modern.css}" rel="stylesheet"/>
<link th:href="@{/css/modern-responsive.css}" rel="stylesheet"/>
<link th:href="@{/css/base.css}" rel="stylesheet"/>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.mousewheel.js}"></script>
<script type="text/javascript" th:src="@{/js/dropdown.js}"></script>
<script type="text/javascript" th:src="@{/js/input-control.js}"></script>
<script type="text/javascript" th:src="@{/js/tile-slider.js}"></script>
<script type="text/javascript" th:src="@{/js/base.js}"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var username_null_tip = /*[[#{username_null_tip}]]*/ 'kkkkkkk',
	username_regexp_tip = /*[[#{username_regexp_tip}]]*/ 'kkkkkkk',
	register_success_transfer_tip = /*[[#{register_success_transfer_tip}]]*/ 'kkkkkkk',
	password_similar_tip = /*[[#{password_similar_tip}]]*/ 'kkkkkkk',
	confirm_password_null_tip = /*[[#{confirm_password_null_tip}]]*/ 'kkkkkkk',
	password_null_tip = /*[[#{password_null_tip}]]*/ 'kkkkkkk',
	email_null_tip = /*[[#{email_null_tip}]]*/ 'kkkkkkk',
	email_regexp_tip = /*[[#{email_regexp_tip}]]*/ 'kkkkkkk',
	password_inconsistent_tip = /*[[#{password_inconsistent_tip}]]*/ 'kkkkkkk',
	error_occurs_tip = /*[[#{error_occurs_tip}]]*/ 'kkkkkkk',
	unexcepted_error_tip = /*[[#{unexcepted_error_tip}]]*/ 'kkkkkkk';
$(function(){
	$('#btn-reg').click(function(){
		$('.input-control').removeClass('border-color-red');
		var hasError = false;
		var username= $('#username').val();
		$('#msg-text').html('');
		if (username == '') {
			$('#msg-text').html($('#msg-text').html()+username_null_tip+'&nbsp;&nbsp;').parent().parent().slideDown(500);
			$('#username').parent().addClass('border-color-red');
			hasError = true;
		} else if (!/^[a-zA-z_]\w*$/.test(username)) {
			$('#msg-text').html($('#msg-text').html()+username_regexp_tip+'&nbsp;&nbsp;').parent().parent().slideDown(500);
			$('#username').parent().addClass('border-color-red');
			hasError = true;
		}
		var password = $('#password').val();
		if (password == '') {
			$('#msg-text').html($('#msg-text').html()+password_null_tip+'&nbsp;&nbsp;').parent().parent().slideDown(500);
			$('#password').parent().addClass('border-color-red');
			hasError = true;
		} else if (new RegExp(username).test(password)) {
			$('#msg-text').html($('#msg-text').html()+password_similar_tip+'&nbsp;&nbsp;').parent().parent().slideDown(500);
			$('#password').parent().addClass('border-color-red');
			hasError = true;
		}
		var confirmPassword = $('#confirmPassword').val();
		if (confirmPassword == '') {
			$('#msg-text').html($('#msg-text').html()+confirm_password_null_tip+'&nbsp;&nbsp;').parent().parent().slideDown(500);
			$('#confirmPassword').parent().addClass('border-color-red');
			hasError = true;
		} else if (confirmPassword != password) {
			$('#msg-text').html($('#msg-text').html()+password_inconsistent_tip+'&nbsp;&nbsp;').parent().parent().slideDown(500);
			$('#confirmPassword').parent().addClass('border-color-red');
			hasError = true;
		}
		var email = $('#email').val();
		if (email == '') {
			$('#msg-text').html($('#msg-text').html()+email_null_tip+'&nbsp;&nbsp;').parent().parent().slideDown(500);
			$('#email').parent().addClass('border-color-red');
			hasError = true;
		} else if (!/^\w+@\w+(\.\w+)+$/.test(email)) {
			$('#msg-text').html($('#msg-text').html()+email_regexp_tip+'&nbsp;&nbsp;').parent().parent().slideDown(500);
			$('#email').parent().addClass('border-color-red');
			hasError = true;
		}
		var mobile = $('#mobile').val();
		var firstName = $('#firstName').val();
		var lastName = $('#lastName').val();
		if (hasError) {
			return;
		}
		
		$.ajax({
			url: /*[[@{/register}]]*/'./register'
				, type: 'POST'
				, data: {
						username: username
						, password: password
						, confirmPassword: confirmPassword
						, email: email
						, mobile: mobile
						, firstName: firstName
						, lastName: lastName
					}
				, dataType: 'json'
				, error: function(jqXHR, textStatus, errorThrown){
					alert(unexcepted_error_tip);
				}
				, success: function(data, textStatus, jqXHR){
					if(data && data.result == 1){
						alert(register_success_transfer_tip);
						window.location = /*[[@{/i}]]*/'./i';
						return;
					}
					$('#msg-text').html(error_occurs_tip + data.result).parent().parent().slideDown(500);
				}
		});
	});
});
/*]]>*/
</script>
</head>
<body>
<header th:substituteby="common/template::header"></header>
<div class="span12 align-center">
	<div class="grid">
		<div class="row">
			<div class="span8">
				<fieldset>
					<legend th:text="#{register_info}">用户注册</legend>
					<div class="grid">
						<div class="row">
							<div class="notices no-display">
						        <div class="bg-color-red">
						            <a href="javascript: void(0)" class="close"></a>
						            <div class="notice-icon"> <i class="icon-locked-2" style="color: white;"></i> </div>
						            <div class="notice-image"> <i class="icon-warning" style="font-size: 48pt; color: white;"></i> </div>
						            <div id="msg-header" class="notice-header fg-color-yellow" th:text="#{error_occurs_tip}">登录失败</div>
						            <div id="msg-text" class="notice-text"></div>
						        </div>
						    </div>
						</div>
						<div class="row">
							<label for="username" class="span2 text-right" th:text="#{username}">用户名</label>
							<div class="input-control text span3">
						        <input type="text" id="username" th:placeholder="#{placeholder_username}" tabindex="1"/>
						        <button class="helper"></button>
						    </div>
						</div>
						<div class="row">
							<label for="password" class="span2 text-right" th:text="#{password}">密码</label>
							<div class="input-control text span3">
						        <input id="password" type="password" th:placeholder="#{placeholder_password}" tabindex="2"/>
						        <button class="helper"></button>
						    </div>
						</div>
						<div class="row">
							<label for="confirmPassword" class="span2 text-right" th:text="#{confirm_password}">密码</label>
							<div class="input-control text span3">
						        <input id="confirmPassword" type="password" th:placeholder="#{placeholder_password}" tabindex="3"/>
						        <button class="helper"></button>
						    </div>
						</div>
						<div class="row">
							<label for="email" class="span2 text-right" th:text="#{email}">用户名</label>
							<div class="input-control text span3">
						        <input type="text" id="email" th:placeholder="#{email}" tabindex="4"/>
						        <button class="helper"></button>
						    </div>
						</div>
						<div class="row">
							<label for="mobile" class="span2 text-right" th:text="#{mobile}">用户名</label>
							<div class="input-control text span3">
						        <input type="text" id="mobile" th:placeholder="#{mobile}" tabindex="5"/>
						        <button class="helper"></button>
						    </div>
						</div>
						<div class="row">
							<label for="firstName" class="span2 text-right" th:text="#{firstName}">用户名</label>
							<div class="input-control text span3">
						        <input type="text" id="firstName" th:placeholder="#{firstName}" tabindex="6"/>
						        <button class="helper"></button>
						    </div>
						</div>
						<div class="row">
							<label for="lastName" class="span2 text-right" th:text="#{lastName}">用户名</label>
							<div class="input-control text span3">
						        <input type="text" id="lastName" th:placeholder="#{lastName}" tabindex="7"/>
						        <button class="helper"></button>
						    </div>
						</div>
						<div class="row">
							<button id="btn-reg" class="big offset2 span3 bg-color-yellow" th:text="#{do_register}" tabindex="8"> 立 即 登 录 </button>
						</div>
					</div>
				</fieldset>
			</div>
			<div class="span4">
				<fieldset>
					<legend th:text="#{been_registered}">还未注册?</legend>
					<div class="grid">
						<div class="row">
							<a href="login.html" th:href="@{/login.html}" style="margin-left: 25px;" class="big button span3 bg-color-green" th:text="#{btn_login_now}" tabindex="9">立即注册</a>
						</div>
					</div>
				</fieldset>
			</div>
		</div>
	</div>
</div>
<div th:substituteby="common/template::page-settings">
</div>
</body>
</html>